<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	  @keyframes aaa{
	  	from{transform: perspective(700px) rotateY(0deg) rotateX(45deg)}
	  	to{transform: perspective(700px) rotateY(360deg) rotateX(45deg)}
	  }
	  /*容器*/
	  .body{
	    width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
	  }
	  /*舞台*/
	  .box{
     width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
	   transform-style: preserve-3d;
	   -webkit-animation:aaa 3s infinite linear;
	transform: perspective(700px) rotateY(0deg) rotateX(45deg) rotateZ(45deg) 
	  }
	  .box:hover{
	    animation-play-state: paused;
	  }
	  .sbox{
	    width: 200px;
      height: 200px;
      background: rgba(0,0,0,.8);
      text-align: center;
      line-height: 200px;
      font-size: 35px;
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
	  }
	  .sbox1{
      transform:translateZ(100px);
    }
	  .sbox2{
	    transform:translateZ(-100px) rotateY(-90deg);
      transform-origin: left;
	  }
	  .sbox3{
	    transform:translateZ(-100px) rotateY(90deg);
      transform-origin: right;
	  }
	  .sbox4{
	    transform: rotateX(-90deg) translateY(100px);
      transform-origin: bottom;
	  }
	  .sbox5{
	    transform: rotateX(90deg) translateY(-100px);
      transform-origin: top;
	  }
	  .sbox6{
	    transform: translateZ(-100px) rotateY(-180deg);
	  }
	</style>
	<body>
	  <div class="body">
      <div class="box">
        <div class="sbox sbox1">1</div>
        <div class="sbox sbox2">2</div>
        <div class="sbox sbox3">3</div>
        <div class="sbox sbox4">4</div>
        <div class="sbox sbox5">5</div>
        <div class="sbox sbox6">6</div>
      </div>
	   </div>
	</body>
</html>
